<template>
  <el-dialog title="批量修改年级" :visible.sync="showUpgradeDialog" width="500px"
             @closed="handleClose" :destroy-on-close="true" :lock-scroll="false">
    <el-form :model="UpgradeForm" ref="createUpgradeForm" :rules="editRules" label-width="100px">

      <el-row justify="center" class="el-row">
        <el-col :span="8">级别，即届数</el-col>
        <el-col :span="8">当前年级名称</el-col>
        <el-col :span="8">新年级名称</el-col>
      </el-row>

      <div v-for="(item, index) in UpgradeForm.dynamicItem" :key="index">

        <el-row class="el-row" >
          <el-col :span="8">
            <div>{{item.school_year}}</div>
          </el-col>
          <el-col :span="8">
            <div>{{item.name}}</div>
          </el-col>
          <el-col :span="8">
            <el-input v-model="item.newName" placeholder="请输入新年级名称" clearable/>
          </el-col>
        </el-row>

      </div>


    </el-form>
    <div slot="footer">
      <el-button @click="showUpgradeDialog=false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: "UpgradeGrade",
  data() {
    return {
      UpgradeForm: {
        dynamicItem: [{
          'id': '1', // 这个id用来更新
          'school_year': '2021',
          'name': '高一(1)班',
          'newName': '' // 修改后的新值
        },
          {
            'id': '1', // 这个id用来更新
            'school_year': '2021',
            'name': '高一(1)班',
            'newName': '' // 修改后的新值
          },
          {
            'id': '1', // 这个id用来更新
            'school_year': '2021',
            'name': '高一(1)班',
            'newName': '' // 修改后的新值
          },
          {
            'id': '1', // 这个id用来更新
            'school_year': '2021',
            'name': '高一(1)班',
            'newName': '' // 修改后的新值
          },
          {
            'id': '1', // 这个id用来更新
            'school_year': '2021',
            'name': '高一(1)班',
            'newName': '' // 修改后的新值
          },
        ], // 动态表单项
      },  // 表单数据
      editRules: {},
      showUpgradeDialog: this.showUpgradeForm // 子组件不能直接修改父组件prop参数
    };
  },
  props: {
    showUpgradeForm: {
      type: Boolean,
      default() {
        return false;
      }
    },
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs['createUpgradeForm'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({lock: true});
          this.$http.post('/grade/edit', this.createUpgradeForm).then(res => {
            loading.close();
            if (res.data.code === 200) {
              this.$message({type: 'success', message: res.data.msg});
              this.$emit('reload')
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /**
     * 关闭页面
     */
    handleClose(hide) {
      if (hide) {
        hide();
      }
      this.UpgradeForm = {} // 清空表单数据
      this.$emit("update:showUpgradeForm", false); // 隐藏
    }
  },
  watch: {
    showUpgradeForm(val) {
      this.showUpgradeDialog = val;
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap
}
</style>
